<template>
  <div>
    <div class="top">
      <van-search
        v-model="value"
        placeholder="请输入搜索关键词"
        show-action
        background="rgba(255, 255, 255, 0)"
      >
        <template #label >
          <div @click="$router.push('/list')">杭州 ▼ |</div>
        </template>
        <template #action><van-icon name="location-o" /></template>
      </van-search>
    </div>
    <div class="lunbo">
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="item in swiper" :key="item.id">
          <img v-lazy="item" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 中间内容部分 -->
    <div class="middle">
      <div class="list">
        <div class="icon">
          <van-icon name="wap-home-o" />
          <p>整租</p>
        </div>
        <div class="icon">
          <van-icon name="friends-o" />
          <p>合租</p>
        </div>
        <div class="icon">
          <van-icon name="location-o" />
          <p>地图找房</p>
        </div>
        <div class="icon">
          <van-icon name="cash-back-record" />
          <p>去出租</p>
        </div>
      </div>
      <div class="youhui"><span>租房小组</span> <i>更多</i></div>
      <!-- 四个盒子 -->
      <div class="four">
        <van-grid direction="horizontal" :gutter="10" :column-num="2">
          <van-grid-item v-for="item in group" :key="item.id"
          :icon="'http://liufusong.top:8080' + item.imgSrc"
          :text="item.title + '' + item.desc">
            <!-- <van-image src="" /> -->
            <!-- <div class="img">
              <img  v-lazy="item"/>
            </div> -->
            <!-- <div class="text">
              {{ item.title }} <br />
              {{ item.desc }}
            </div> -->
          </van-grid-item>
        </van-grid>
      </div>
    </div>
  </div>
</template>

<script>
import { swiper, group } from '@/api/shouye'
export default {
  async created() {
    const { data } = await swiper()
    this.abc = data.body
    this.abc.forEach((item) => {
      this.url = 'http://liufusong.top:8080' + item.imgSrc
      this.swiper.push(this.url)
    })
    const { data: reData } = await group()
    console.log(reData)
    this.group = reData.body
    this.group.forEach((item) => {
      this.url2 = 'http://liufusong.top:8080' + item.imgSrc
    })
  },
  name: 'shouye-page',
  data() {
    return {
      value: '',
      abc: [],
      swiper: [],
      url: '',
      url2: '',
      group: []
    }
  },
  methods: {}
}
</script>

<style scoped lang="less">
.top {
  // position: absolute;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
}
// 轮播图的css
.lunbo .van-swipe-item {
  width: 375px;
  height: 200px;
  img {
    width: 100%;
  }
}
// 中间内容部分
.middle {
  background-color: #f6f5f6;
  height: 400px;
  .list {
    height: 120px;
    width: 100%;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    text-align: center;
    .icon {
      margin: 10px;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      text-align: center;
      background-color: #f2fbf7;
      font-size: 50px;
      color: #0aad64;
      p {
        font-size: 14px;
        color: black;
      }
    }
  }
  // 优惠的css出问题了
  .youhui {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    // background-color: #39a9ed;
    width: 100%;
    height: 20px;
    span {
      margin-left: 10px;
    }
    i {
      font-style: normal;
      margin-right: 10px;
      color: #787d82;
    }
  }
  // 四个盒子的css
}

.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
</style>
